<template>
  <div id="app" style="height: 100%;background-color: #2c3e50">

    <el-container style="height: 100%;">
      <el-aside class="left" width="200px" style="background-color: rgba(0,25,46,1)">
        <sidebar />
      </el-aside>
      <el-container>
        <mapContainer style="background-color: black; background-image:url('static/image/bg_image.jpg') " @loadeds=""></mapContainer>
        <!--      <Map :componentName="componentName"></Map>-->
        <router-view/>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import sidebar from "./components/sideBar";
import mapContainer from "./components/mapContainer";
import Map from "../static/uselessFiles/Map"
export default {
  name: "App",
  data() {
    return {
      componentName: 'CesiumContainer'
    }
  },
  components: {
    sidebar,
    Map,
    mapContainer
  },
  mounted(){
    // document.getElementsByClassName("right")[0].style.width = document.body.clientWidth - 200 + 'px'
  }
};
</script>

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /*.leaflet-custom-popup :first-child{*/
  /*  width: fit-content !important*/
  /*}*/

  .leaflet-custom-popup > .leaflet-popup-content{
    width: auto !important;
  }

  .leaflet-custom-popup2 > .leaflet-popup-content{
    width: auto !important;
  }


.left {
  background-color: rgba(0,25,46,1);
  /*width: 200px;*/
  overflow-y:scroll;
  /*overflow-x:visible*/
  overflow-x: hidden;
  scrollbar-arrow-color:#ffd04b;
  scrollbar-base-color:red
}

.left::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.left::-webkit-scrollbar {/*滚动条整体样式*/
  width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ffd04b;
}

.left::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}

</style>
